	<template>
		<view class="pages">
			<u-tabs name="dictLabel" count="cate_count" bar-height="2" bar-width="80" :item-width="230" :list="list"
				:is-scroll="false" :current="current" @change="change" active-color="#C49266"
				inactiveColor="#C49266"></u-tabs>
			<view class="content">
				<u-search placeholder="请输入查询商品" v-model="code" :showAction="false" @change="getCode(code)"></u-search>
			</view>
			<view class="card">
				<view class="r_da" @click="lookShop(item,index)" v-for="(item,index) in rightData" :key="index">
					<u-image width="150rpx" height="150rpx" :src="getImage(item.brPublicity)"></u-image>
					<view class="r_title">{{item.brName}} </view>
				</view>
			</view>
			<image :src="src" mode="scaleToFill" class="images"></image>
		</view>
	</template>

	<script>
		import {
			url
		} from '@/common/index.js'
		import {
			getDict,
			getMiniSelect,
			getBg
		} from "@/common/api.js"
		export default {
			data() {
				return {
					list: [],
					current: 0,
					code: '', // 搜索字段
					rightData: [],
					SData: [],
					src: ""
				}
			},
			created() {
				this.getDict()
				this.getBg()
			},
			methods: {
				async getBg() {
					let data = await getBg(126)
					console.log(data);
					this.src = url + data.rows[0].baUrl
				},

				async getDict() {
					let data = await getDict()
					this.list = data.data
					this.change(0)
				},
				async change(index) {
					this.current = index;
					let data = this.list[index]
					let res = await getMiniSelect(data.dictCode)
					this.rightData = res.data
					this.SData = res.data
				},
				// 查看商品
				lookShop(item, index) {
					uni.navigateTo({
						url: "/pagesShop/index/shop?item=" + item.id + "&code=" + this.list[this.current].dictCode
					})
				},
				getCode(code) {
					let list = JSON.parse(JSON.stringify(this.rightData))
					if (code != "") {
						let newData = []
						list.forEach(item => {
							if (item.dictLabel && item.dictLabel.indexOf(code) > -1) {
								newData.push(item)
							}
						})
						this.rightData = newData
					} else {
						this.rightData = this.SData
					}

				},
				getImage(path) {
					return url + path
				}

			}
		}
	</script>

	<style scoped>
		.content {
			padding: 30rpx;
		}

		.card {
			padding: 10rpx;
			animation: moveRight 2s;
			/* 动画名称，持续时间，迭代次数 */
		}

		/* 定义动画 */
		@keyframes moveRight {
			from {
				transform: translateY(-200rpx);
			}

			to {
				transform: translateY(0);
				/* 从当前位置平移100像素 */
			}
		}

		.r_box {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
		}

		.r_da {
			width: 710rpx;
			margin: 10rpx;
			background-color: rgba(68, 68, 68, 0.4);
			border-radius: 15rpx;
			margin-bottom: 20rpx;
			padding: 15rpx;
			display: flex;
		}

		.r_title {
			margin: 15rpx;
			font-size: 30rpx;
			color: #C49266;
		}

		.images {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: -1;
			height: 100vh;
		}
	</style>